//桑基图
<template>
  <div>
    <div id="myChart" style="height:500px"></div>
  </div>
</template>

<script>
  export default {
    data(){
      return{

      }
    },
    mounted(){
      this.init();
    },
    methods:{
      init(){
        let myChart=this.$echarts.init(document.getElementById('myChart'));
        let option={
          color: [
            '#ff0000', '#d6c704', '#f4a582', '#fddbc7', '#4393c3', '#2166ac'
          ],
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          animation: false,
          series:[
            {
              type:'sankey',
              bottom: '10%',
              focusNodeAdjacency: 'allEdges',
              data:[
                {name:'Compressor A'},
                {name:'Compressor B'},
                {name:'Compressor C'},
                {name:'Air Accumulator'},
                {name:'Unknown Loss'},
                {name:'Line 1'},
                {name:'Line 2'},
                {name:'Compressor Air'}
              ],
              links:[
                {source:'Compressor A',target:'Air Accumulator',value:39.33},
                {source:'Compressor A',target:'Line 1',value:31.77},
                {source:'Compressor B',target:'Air Accumulator',value:33.23},
                {source:'Compressor C',target:'Air Accumulator',value:36.64},
                {source:'Compressor C',target:'Line 1',value:40.06},
                {source:'Air Accumulator',target:'Line 2',value:30.33},
                {source:'Air Accumulator',target:'Unknown Loss',value:78.87},
                {source:'Line 1',target:'Line 2',value:21.27},
                {source:'Line 1',target:'Compressor Air',value:27.67},
                {source:'Line 1',target:'Unknown Loss',value:25.66},
                {source:'Line 2',target:'Unknown Loss',value:20.00},
              ],
              // orient: 'vertical',
              label:{
                position:'top'
              },
              lineStyle: {
                normal:{
                  color:'source',
                  curveness: 0.5
                }
              }
            }
          ]
        };

        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>

